<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
    <!-- bootstrap-table 表格插件样式 -->
    <link th:href="@{/ajax/libs/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet" />
    <link th:href="@{/css/animate.css}" rel="stylesheet" />
    <link th:href="@{/css/style.css}" rel="stylesheet" />
    <link th:href="@{/ruoyi/css/ry-ui.css}" rel="stylesheet" />
    <link th:href="@{/css/my.css}" rel="stylesheet" />
    <!-- layui -->
    <script th:src="@{/ajax/libs/layui/layui.js}"></script>

    <!--页面样式文件-->
    <link rel="stylesheet" th:href="@{/dist/css/main.css}">
</head>

<body class="gray-bg">
<!--右侧主体-->

<div class="plant-protection">
    <!--搜索区域-->
    <div class="row rowNew">
        <div class="col-sm-12 search-area">
            <form id="formId">
                <div class="select-list">
                    <ul class="ulForm clearfix">
                            <li class="select-time">
                                <label>选择时间： </label>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${beginTime}" id="startTime" placeholder="开始时间"
                                           name="params[beginPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <span>--</span>
                                <div class="fl inputTime-outer">
                                    <input type="text" class="time-input" th:value="${endTime}" id="endTime" placeholder="结束时间"
                                           name="params[endPlanTime]"/>
                                    <div class="icon-rili"></div>
                                </div>
                                <div class="btn-outer fl">
                                    <a class="btn btn-primary mlr_8" onclick="reloadIt()"><i
                                            class="fa fa-search"></i>&nbsp;搜索</a>
                                </div>
                            </li>

                            <li class="btn-group">
                                <a class="thisYear btn btn-primary mlr_8">本年</a>
                                <a class="thisMonth btn btn-primary mlr_8">本月</a>
                                <a class="thisDay btn btn-primary mlr_8">本日</a>
                            </li>
                    </ul>
                </div>
            </form>
        </div>
    </div>

    <div class="row">
        <div class="middle col-lg-12">
            <div class="time">
                <a href="#" onclick="xiaodu()">
                <p class="p1">
                    消毒次数：
                    <span th:text="${xiaoduAmount}"></span> 次
                </p></a>
                <div class="item-list">
                    <div class="bottom col-lg-12">
                        <ul>

                            <li class="col-lg-2 " th:each="xiaodu:${xiaoduList}">
                                <div  th:id="${xiaodu.caiId}" class="li-1">
                                    <div class="right-top">
                                        <span th:id="${xiaodu.caiId}" th:text="${xiaodu.caiName}">预防消毒：</span>
                                        <span th:text="${xiaodu.planCounts.amount}"></span>
                                    </div>
                                    <div class="right-middle">占比<span th:text="${xiaodu.planCounts.ratio}"></span>%</div>
                                    <div class="right-bottom ">
                                        <p class="active" th:style="'width:'+${xiaodu.planCounts.ratio}+'%'"></p>
                                    </div>
                                </div>

                            </li>
                        </ul>
                    </div>
                </div>
            </div>

        </div>
    </div>

    <!--图表区域-->
    <div class="row rowNew" style="margin-top: 24px">
        <div class="echart-item col-sm-12">
            <div id="main" style="width:100%;height:410px;"></div>
        </div>
    </div>
</div>
</div>
</div>


<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>

<!--echart-->
<script th:src="@{/dist/libs/echarts/dist/echarts.min.js}"></script>

<!-- 遮罩层 -->
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<script th:src="@{/ajax/libs/layui/layui.js}"></script>
<script th:src="@{/ruoyi/js/common.js?v=3.4.0}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=3.4.0}"></script>

<script th:src="@{/ruoyi/js/my-common-js.js}"></script>
<script th:inline="javascript">
    var ctx = [[@{
        /}]];
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            var timestamp = new Date().getTime();
            var timestamp1 = new Date().getTime() + 1000 * 60 * 60 * 24 * 2;
            //执行一个laydate实例
            laydate.render({
                elem: '#test1' //指定元素
                ,
                format: "yyyy-MM-dd",
                value: new Date(timestamp)
            });
            //执行一个laydate实例
            laydate.render({
                elem: '#test2' //指定元素
                ,
                format: 'yyyy-MM',
                value: new Date(timestamp1)
            });
        });


        $("#tabList li").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            //2 根据当前li的索引值(index)找到底部对应的div，设置selected类名，其他div移除类名
            var index = $(this).index(); //获取当前li的索引值
            $(".bottom-box .right").eq(index).addClass("active").siblings().removeClass("active");
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var xData = [[${xiaoduType}]];
        var yData = [[${xiaoduCount}]];
        var _title = '消毒统计表';
        // 指定图表的配置项和数据
        var option01 = {
            title: {
                text: _title,
                x: 'center',
                textStyle: {
                    fontSize: 36,
                    color: '#2d353e'
                }
            },
            tooltip: {
                trigger: 'axis'
            },
            grid: {
                top: '21%',
                bottom: '7%',
                left: '7%',
                right: '5%'
            },
            xAxis: {
                data: xData,
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebeef1'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#a3abb4',
                        fontSize: 14,
                    }
                }
            },
            yAxis: {
                name: '次',
                nameTextStyle: {
                    color: '#a3abb4',
                    fontSize: 14,
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebeef1'
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#ebeef1'
                    }
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#a3abb4',
                        fontSize: 14,
                    }
                }
            },
            series: [{
                type: 'bar',
                barWidth: 12,
                emphasis: {
                    itemStyle: {
                        color: '#52adff'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#52adff',
                        barBorderRadius: [0, 0, 0, 0],
                    }
                },
                data: yData
            }, {
                name: 'a',
                tooltip: {
                    show: false
                },
                type: 'bar',
                barWidth: 12,
                emphasis: {
                    itemStyle: {
                        color: '#2e9bff'
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#2e9bff',
                        barBorderRadius: [0, 0, 0, 0]
                    }
                },
                data: yData,
                barGap: 0,
                legendHoverLink: false,
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: '#73bbff',
                    }
                },
                symbol: 'image://',
                symbolRotate: 0,
                symbolSize: ['24', '10'],
                symbolOffset: ['0', '5'],
                symbolPosition: 'start',
                data: yData,
                z: 3
            }, {
                name: 'b',
                tooltip: {
                    show: false
                },
                type: 'pictorialBar',
                itemStyle: {
                    normal: {
                        color: '#73bbff',
                    }
                },
                symbol: 'image://',
                symbolRotate: 0,
                symbolSize: ['24', '10'],
                symbolOffset: ['0', '-5'],
                symbolPosition: 'end',
                data: yData,
                z: 3
            }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option01);
        $(".li-1").click(function () {
                var link = ctx + 'system/ncXiaoduLogs/zhibaoXiaodu?workType=' + $(this).attr('id');

                var s = $('#startTime').val();
                var e = $('#endTime').val();

                link += "&beginTime=" + s + "&endTime=" + e;

                $.modal.openTab("消毒列表", link);
            }
        )
        ;

        function xiaodu() {
            var link = ctx + 'system/ncXiaoduLogs';

            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "&beginTime=" + s + "&endTime=" + e;

            $.modal.openTab("消毒列表", link);
        }
        function reloadIt() {
            var link = ctx + "system/ncZhibao/zhibaoXiaodu";
            var s = $('#startTime').val();
            var e = $('#endTime').val();

            link += "?beginTime=" + s + "&endTime=" + e;
            window.location.href = link;
        }

        $('.thisYear').click(function () {
            $('#startTime').val(new Date().getFullYear() + "-01-01");
            reloadIt();
        });


        $('.thisMonth').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m + "-01");
            reloadIt();
        });
        $('.thisDay').click(function () {
            var d = new Date();
            var m = d.getMonth() + 1;
            m = m < 10 ? '0' + m : m;
            $('#startTime').val(new Date().getFullYear() + "-" + m +"-"+ new Date().getDate());
            reloadIt();
        });

        setTitle("消毒管理",false)
</script>
</body>

</html>
